<template>
  <div class="app-container">
    <div class="button">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="伙伴查询" name="1">
          <el-form :inline="true">
            <el-form-item label="单位名称">
              <el-input v-model="company"></el-input>
            </el-form-item>
            <el-form-item label="退出类型">
              <el-select v-model="exitType" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in exitTypeList"
                  :key="item.dicValue"
                  :label="item.dicKey"
                  :value="item.dicValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="其他机构" v-if="exitType==='26'">
              <el-input v-model="orgRemark"></el-input>
            </el-form-item>
            <el-form-item label="用途偏好">
              <el-select v-model="usage" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in usageList"
                  :key="item.dicValue"
                  :label="item.dicKey"
                  :value="item.dicValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="投资规模">
              <el-row>
                <el-col :span="9">
                  <el-select v-model="abilityMin" placeholder="请选择" style="width:100%">
                    <el-option
                      v-for="item in abilityList"
                      :key="item.dicValue"
                      :label="item.dicKey"
                      :value="item.dicValue"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="2">
                  <div align="center">{{" ~ "}}</div>
                </el-col>
                <el-col :span="9">
                  <el-select v-model="abilityMax" placeholder="请选择" style="width:100%">
                    <el-option
                      v-for="item in abilityList"
                      :key="item.dicValue"
                      :label="item.dicKey"
                      :value="item.dicValue"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="资产类型">
              <el-select v-model="typeId" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in assetsTypeList"
                  :key="item.dicValue"
                  :label="item.dicKey"
                  :value="item.dicValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="其他资产类型" v-if="typeId==='09'">
              <el-input v-model="typeName"></el-input>
            </el-form-item>
            <el-form-item label="覆盖地区">
              <el-cascader
                style="width:100%"
                placeholder="试试搜索：无锡"
                v-model="cities"
                :options="provinceList"
                :props="{value:'regionId',label:'regionName',children:'children', multiple: true }"
                collapse-tags
                filterable
              ></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple-dark">
                    <el-button type="primary" @click="find()">查找</el-button>
                    <el-button type="primary" @click="reset()">重置</el-button>
                    <el-button type="primary" @click="handleAdd(createUserId)">添加</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <el-form>
            <span style="color: rgba(123,123,123,0.8)">指有财务投资、并购、自持、运营等需求，可以帮助公司投资或主导的标的退出变现的机构或自然人。</span>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-table
      id="myform"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column label="伙伴姓名" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="录入时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime.substring(0,10) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">{{ scope.row.telephone }}</template>
      </el-table-column>

      <el-table-column label="单位名称" align="center">
        <template slot-scope="scope">{{ scope.row.company }}</template>
      </el-table-column>
      <el-table-column label="岗位" align="center">
        <template slot-scope="scope">{{ scope.row.post }}</template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row.partnerId)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.row.partnerId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[20, 40, 60]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import $ from "@/api/assets";
import qs from "querystring";

export default {
  data() {
    return {
      findState:false,
      createUserId: "",
      activeName: '1',
      company: "",
      value: "",
      state: 0,
      list: [],
      val: "",
      listLoading: true,
      currentPage: 1,
      pageSize: 20,
      total: 0,
      exitType: "",
      orgRemark: "",
      usage: "",
      abilityMin: "",
      abilityMax: "",
      typeId: "",
      typeName: "",
      cities: [],
      options: [],
      usageList: [],
      assetsTypeList: [],
      abilityList: [],
      provinceList: [],
      exitTypeList: []
    };
  },
  created() {
    $.getCreateUserId().then(response => {
      this.createUserId = response.data.userId;
      this.listLoading = false;
      this.fetchData();
    });
    $.addInit().then(res => {
      if (res.success) {
        this.sourceList = res.data.source;
        this.provinceList = res.data.province;
        this.assetAttrList = res.data.attr;
        this.bizTypeList = res.data.bizTypeList;
        this.exitTypeList = res.data.exitTypeList;
        this.usageList = res.data.usageList;
        this.abilityList = res.data.abilityList;
        this.assetsTypeList = res.data.assetsTypeList;
      }
    });
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      let params = qs.stringify({
        partnerType: 3,
        pageSize: this.pageSize,
        pageIndex: this.currentPage
      });
      $.exitInfo(params).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    find() {
      this.listLoading = true;
      this.list = [];
      this.pushcities = [];
      for (let i in this.cities) {
        this.pushcities.push(this.cities[i][1]);
      }
      let params = qs.stringify({
        partnerType: 3,
        "cities[]": this.pushcities.length > 0 ? this.pushcities : null,
        exitType: this.exitType,
        orgRemark: this.orgRemark,
        company: this.company,
        usage: this.usage,
        abilityMin: this.abilityMin,
        abilityMax: this.abilityMax,
        typeId: this.typeId,
        typeName: this.typeName,
        pageSize: this.pageSize,
        pageIndex: this.currentPage
      });
      $.exitInfo(params).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.listLoading = false;
        this.findState=true
      });
    },
    reset() {
      this.exitType = ""
      this.company = ""
      this.orgRemark = ""
      this.usage = ""
      this.abilityMax = ""
      this.abilityMin = ""
      this.typeId = ""
      this.typeName = ""
      this.cities = []
      this.fetchData()
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      if (this.state == 1) {
        this.find();
      } else this.find();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      if (this.state == 1) {
        this.find();
      } else {
        if (this.findState==true){
          this.find()
        }else {
          this.find();
        }
      }
    },
    handleAdd(id) {
      this.$router.push({
        path: "add",
        query: { id: id }
      });
    },
    handleEdit(id) {
      this.$router.push({
        path: "edit",
        query: { id: id }
      });
    },
    handleDel(id) {
      this.$confirm("此操作将删除该伙伴, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          $.remove({ partnerId: id }).then(response => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.fetchData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
